import React, { useState } from 'react'
import { DropdownMenu, DropdownMenuContent, DropdownMenuTrigger, DropdownMenuSeparator, DropdownMenuItem } from '../ui/dropdown-menu'
import { Avatar, AvatarFallback, AvatarImage } from '../ui/avatar'
import { Button } from '../ui/button'
import type { User } from 'better-auth'
import Link from 'next/link'
import { LogOut, PenSquare, UserIcon } from 'lucide-react'
import { signOut } from '@/lib/auth-client'
import { toast } from 'sonner'
import { useRouter } from 'next/navigation'

interface UserMenuProps {
    user: User
}
export default function UserMenu({ user }: UserMenuProps) {

    const router = useRouter()
    const [isLoading, setIsLoading] = useState(false)

    const getInitials = (name: string) => name.charAt(0).toUpperCase()

    const handleLogout = async () => {
        setIsLoading(true)
        try {
            await signOut({
                fetchOptions: {
                    onSuccess: () => {
                        toast('Logout success')
                        router.refresh()
                    }
                }
            })
        } catch (error) {
            console.log(error)
            toast('Logout failed')
        } finally {
            setIsLoading(false)
        }
    }

    return (
        <DropdownMenu>
            <DropdownMenuTrigger asChild>
                <Button variant='ghost' className='relative h-8 w-8 rounded-full'>
                    <Avatar >
                        <AvatarImage src="https://github.com/shadcn.png" />
                        <AvatarFallback>{getInitials(user.name)}</AvatarFallback>
                    </Avatar>
                </Button>
            </DropdownMenuTrigger>

            <DropdownMenuContent align="end" className='w-56'>
                <div className='flex items-center justify-start gap-2 p-2'>
                    <div className='flex  flex-col space-y-1 leading-none'>
                        <p className='font-bold'>{user.name}</p>
                        <p className='text-sm text-muted-foreground'>{user.email}</p>
                    </div>
                </div>
                <DropdownMenuSeparator />

                <DropdownMenuItem asChild className='cursor-pointer'>
                    <Link href="/profile">
                        <UserIcon className='mr-2 h-4 w-4' />
                        <span>Profile</span>
                    </Link>
                </DropdownMenuItem>
                <DropdownMenuItem asChild className='cursor-pointer'>
                    <Link href="/post/create">
                        <PenSquare className='mr-2 h-4 w-4' />
                        <span>Create Post</span>
                    </Link>
                </DropdownMenuItem>
                <DropdownMenuSeparator />
                <DropdownMenuItem className='cursor-pointer' disabled={isLoading} onClick={handleLogout}>
                    <LogOut className='mr-2 h-4 w-4' />
                    <span>{isLoading ? '...' : 'Logout'}</span>
                </DropdownMenuItem>
            </DropdownMenuContent>
        </DropdownMenu>
    )
}
